<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="验收确认" width="50%" align-center>
      <px-form ref="formRef" :inline="false" :model="formValue" label-position="right" label-width="100px">
        <px-form-item label="验收人" prop="acceptor">
          <px-input v-model="formValue.acceptor" :disabled="true" />
        </px-form-item>
        <px-form-item label="审批意见" prop="acceptOpinion">
          <px-input
            v-model="formValue.acceptOpinion"
            type="textarea"
            placeholder="请输入"
            :autosize="{ minRows: 3, maxRows: 4 }"
            maxlength="1000"
            clearable
          />
        </px-form-item>
        <px-form-item label="验收签字" prop="acceptSignatureFileList" :rules="[{ required: true, message: '验收签字不能为空', trigger: 'change' }]">
          <PhotoUpload
            :countLimit="1"
            photoType="add"
            :photoList="formValue.acceptSignatureFileList"
            :photoData="{ moduleName: moduleName }"
            @changePhotoList="changePhotoList"
            @savePhotoStatus="savePhotoStatus"
          />
        </px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="dialogVisible = false">取消</px-button>
          <px-button type="primary" :disabled="photoStatusFlag" @click="handleSubmit(formRef)">确认提交验收</px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { PxMessage } from "px-ui";
import type { FormInstance } from "px-ui";
import { acceptTask } from "@/api/erc/inspectTask";
const props = defineProps(["moduleName", "data"]);
const dialogVisible = defineModel("dialogVisible");
const emits = defineEmits(["refresh"]);
//form表单相关
const formRef = ref<InstanceType<typeof FormInstance>>();

// 验收人表单的值
const formValue = ref<{ acceptor?: string; acceptorId?: number; acceptOpinion?: string; acceptSignatureFileList?: any[]; acceptSignature?: string }>(
  {}
);

watchEffect(() => {
  formValue.value.acceptor = props.data?.acceptor;
  formValue.value.acceptSignatureFileList = props.data?.acceptSignatureFileList || [];
});
const changePhotoList = (list: any[]) => {
  const photoIds = list.map(item => item.response.data?.id);
  formValue.value.acceptSignature = photoIds[0];
  formValue.value.acceptSignatureFileList = list;
};
const photoStatusFlag = ref(false);
// 图片是否上传完，是否可以保存
const savePhotoStatus = val => {
  photoStatusFlag.value = val;
};
const handleSubmit = async (formEl: InstanceType<typeof FormInstance> | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = {
        id: props.data.id,
        taskNo: props.data.taskNo,
        acceptorId: props.data.acceptorId,
        acceptor: props.data.acceptor,
        acceptOpinion: formValue.value.acceptOpinion,
        acceptSignature: formValue.value.acceptSignature
      };
      await acceptTask(data);
      PxMessage.success("提交成功");
      emits("refresh");
      dialogVisible.value = false;
    }
  });
};
</script>
